<template>
  <div>
    显示的值：{{ flag }}
    <button @click="changeFlag">改变值</button>
    <!-- 使用驼峰形式使用组件 -->
    <test-comp :msg="msg" time="42分钟" @bao="bao" ref="testComp"></test-comp>
    <!-- 获取子组件的值 -->
    <button @click="getTestCompVal">获取子组件的值</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 直接引入组件，无需注册
import TestComp from './components/TestComp.vue'

// 初始化声明变量
let flag = ref('第一次循环')
let msg = ref('公交车爆炸时间')

// 获取子组件实例，名称要和组件上定义的 ref 名称一致
let testComp = ref()

function changeFlag() {
  // 改变ref的值需要跟上 .value
  flag.value = '第二次循环'
}

// 父组件执行由子组件触发的方法
function bao(res) {
  console.log(res, '来自子组件的值')
}

function getTestCompVal() {
  let info = testComp.value.info
  console.log(info) //=> Proxy {name: '李诗晴', msg: '喜欢'}
  let resmsg = testComp.value.police()
  console.log(resmsg) //=> 肖鹤云报警

  // 如果直接使用子组件中没有导出的内容则获取到的值是 undefined
  console.log(testComp.value.notmsg); //=> undefined
}
</script>